<template>
    <div class="dept">
        <Tree class="dept-tree" style="font-size: 16px;" :data="data3" :load-data="loadData" show-checkbox></Tree>
        <Form class="dept-form" label-position="right" :label-width="100">
            <FormItem label="Title">
                <Input ></Input>
            </FormItem>
            <FormItem label="Title name">
                <Input ></Input>
            </FormItem>
            <FormItem label="Aligned title">
                <Input ></Input>
            </FormItem>
            <FormItem label="Aligned title">
                <Input ></Input>
            </FormItem>
            <FormItem label="Aligned title">
                <Input ></Input>
            </FormItem>
            <FormItem label="Aligned title">
                <Input ></Input>
            </FormItem>
            <FormItem label="Aligned title">
                <Input ></Input>
            </FormItem>
            <FormItem label="Aligned title">
                <Input ></Input>
            </FormItem>
        </Form>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                data3: [
                    {
                        title: 'parent',
                        loading: false,
                        children: []
                    }
                ]
            }
        },
        methods: {
            loadData (item, callback) {
                setTimeout(() => {
                    const data = [
                        {
                            title: 'children',
                            loading: false,
                            children: []
                        },
                        {
                            title: 'children',
                            loading: false,
                            children: []
                        }
                    ];
                    callback(data);
                }, 1000);
            }
        }
    }
</script>
<style scoped>

</style>

